<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
  <style>
  .upload_preview{border-top:1px solid #bbb; border-bottom:1px solid #bbb; background-color:#fff; overflow:hidden; margin-top: 10px;}
  .upload_preview p{margin-bottom: 0;}
  #fileImage{position: absolute; top: 0; opacity: 0;}
  .upload_append_list{height:300px; padding:0 1em; float:left; position:relative;}
  .upload_delete{margin-left:2em;}
  .upload_image{max-height:250px; padding:5px;}
  .upload_submit{padding-top:1em; padding-left:1em; margin-bottom: 20px;}
  .upload_submit_btn{display:none; height:32px; font-size:14px;}
  .upload_loading{height:250px; background:url(../style/images/loading.gif) no-repeat center;}
  </style>
</head>
<body>
  <div class="container">
    <ul class="nav nav-tabs mb20">
      <li class="active"><a href="save.html">存储数据库</a></li>
      <li><a href="compareFeature.html">特征码比对</a></li>
      <li><a href="searchFaces.html">数据库查找</a></li>
      <li><a href="imgList.html">数据库图像预览</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
    <div class="tips mt20">
      <p>实现的功能：对图像进行人脸检测并提取特征码然后加入数据库</p>
      <p>调用的接口：detectAndAddFeatures</p>
      <p>接口参数：imgData（照片的二进制流文件）, faceNum（默认值0）</p>
      <p>举例：client.detectAndAddFeatures(imgBlob, 0, function (data) {})</p>
    </div>
    <div class="div-upload">
      <!-- 提交按钮 -->
      <div style="position:relative;">
        <button type="button" class="btn btn-primary">上传照片</button>
        <input id="fileImage" type="file" size="30" name="fileselect[]" multiple accept="image/jpeg,image/png,image/gif" />
      </div>
      <!-- 存放照片 -->
      <ul id="preview" class="upload_preview"></ul>
      <!-- 点击提交按钮 -->
      <div class="upload_submit">
        <button type="button" id="fileSubmit" class="btn btn-primary upload_submit_btn">保存数据</button>
      </div>
      <!-- 保存结果 -->
      <div id="uploadInf" class="tips">
        <p>照片保存成功结果：</p>
      </div>
    </div>
  </div>
  <script src="../style/js/jquery.min.js"></script>
  <script src="../style/js/bootstrap.min.js"></script>
  <script src="config/thrift.js"></script>
  <script src="config/FaceDb.js"></script>
  <script src="config/FaceDb_types.js"></script>
  <script src="config/common.js"></script>
  <script src="js/preview.js"></script>
  <script src="js/imgsFile.js"></script>
  <script>
    var params = {
      fileInput: $("#fileImage").get(0),
      upButton: $("#fileSubmit").get(0),
      filter: function (files) {
        var arrFiles = [];
        for (var i = 0, file; file = files[i]; i++) {
          if (file.type.indexOf("image") == 0) {
            arrFiles.push(file);
          } else {
            alert('文件"' + file.name + '"不是照片。');
          }
        }
        return arrFiles;
      },
      // 选择文件
      onSelect: function (files) {
        var html = '', i = 0;
        $("#preview").html('<li class="upload_loading"></li>');
        var funAppendImage = function () {
          file = files[i];
          if (file) {
            var reader = new FileReader()
            reader.onload = function (e) {
              html = html + '<li id="uploadList_' + i + '" class="upload_append_list">' +
                '<p><strong>' + file.name + '</strong>' +
                '<a href="javascript:" class="upload_delete" title="删除" data-index="' + i + '">删除</a></p>' +
                '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" />' +
                '<p id="uploadTip_'+i+'" class="uploadTip"></p>'+
                '</li>';

              i++;
              funAppendImage();
            }
            reader.readAsDataURL(file);
          } else {
            $("#preview").html(html);
            if (html) {
              //删除方法
              $(".upload_delete").click(function () {
                imgsFile.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
                return false;
              });
              //提交按钮显示
              $("#fileSubmit").show();
            } else {
              //提交按钮隐藏
              $("#fileSubmit").hide();
            }
          }
        };
        funAppendImage();
      },
      // 删除文件
      onDelete: function (file) {
        $("#uploadList_" + file.index).fadeOut();
        //file控件value置空
        $('#fileImage').val('');
      },
      // 提交文件成功
      onSuccess: function (file, response) {
        $("#uploadInf").append("<p>上传成功，照片的md5是：" + response + "</p>");
      },
      // 提交文件失败
      onFailure: function (file) {
        $("#uploadImage_" + file.index).css("opacity", 0.2);
        $('#uploadTip_' + file.index).text('上传失败')
      },
      // 完成所有操作
      onComplete: function () {
        //提交按钮隐藏
        $("#fileSubmit").hide();
        //file控件value置空
        $('#fileImage').val('');
        // 成功提示
        $("#uploadInf").append("<p>当前照片全部上传完毕，可继续添加上传。</p>");
      }
    };
    imgsFile = $.extend(imgsFile, params);

    // 初始化，调用imgFile.js 的方法
    imgsFile.init();
  </script>
</body>
</html>